@use "@/common/styles/colors"

.settings-item
  box-sizing: border-box
  width: 90%
  margin-top: 1rem
  padding: 0.75rem 1.5rem
  display: flex
  gap: 0.8rem
  align-items: center
  border-radius: 1rem
  border: 1px solid transparent
  cursor: pointer
  min-width: 0

  svg
    width: 1.5rem
    height: 1.5rem
    flex-shrink: 0

  h2
    margin: 0
    font-size: 1.2rem
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    min-width: 0

  &:hover
    border: 1px solid colors.$gray
.settings-item-active
  background-color: colors.$dark-gray
  border: 1px solid colors.$gray